<template>
    <a-layout-sider class="sider-box" :class="active?'active':''">
      <div ref="widgetPanel" id="s-widget-panel">
          <div class="s-widget-classify">
              <ul class="s-classify-wrap">
                  <li v-for="(item, index) in widgetClassifyList" :key="index" :class="['s-classify-item', { 's-active-classify-item': activeWidgetClassify === index }]" @click="clickClassify(index)">
                      <component :is="item.icon" class="icon" :size="24"/>
                      <span class="title">{{ item.name }}</span>
                  </li>
              </ul>
              <help>
                <ul class="b-classify-wrap">
                    <li :class="['b-classify-item']">
                        <icon-question-circle class="icon" />
                        <span class="title">帮助</span>
                    </li>
                </ul>
              </help>
          </div>
          <div ref="widgetWrap" v-show="active" class="s-widget-wrap">
              <temp-list-wrap :style="getStyle(0)" />
              <graph-list-wrap v-show="+activeWidgetClassify === 1" :active="+activeWidgetClassify === 1" />
              <text-list-wrap v-show="+activeWidgetClassify === 2" :active="+activeWidgetClassify === 2" />
              <image-list-wrap v-show="+activeWidgetClassify === 3" :active="+activeWidgetClassify === 3" />
              <background-wrap v-show="+activeWidgetClassify === 4" :active="+activeWidgetClassify === 4" />
          </div>
          <div v-show="active" class="s-side-wrap">
              <a-tooltip effect="dark" content="收起侧边栏" placement="right">
                  <div class="pack__up" @click="active = false"></div>
              </a-tooltip>
          </div>
      </div>
    </a-layout-sider>
</template>
<script setup lang="ts">
import TempListWrap from "./wrap/TempListWrap.vue";
import TextListWrap from "./wrap/TextListWrap.vue";
import ImageListWrap from "./wrap/ImageListWrap.vue";
import BackgroundWrap from "./wrap/BackgroundWrap.vue";
import GraphListWrap from "./wrap/GraphListWrap.vue";
import Help from "@/views/Editor/layouts/panel/leftPanel/help.vue";

const widgetClassifyList =  [
    {
        name: '模板',
        icon: 'icon-apps',
        show: false,
    },
    {
        name: '素材',
        icon: 'icon-common',
        show: false,
    },
    {
        name: '文字',
        icon: 'icon-edit',
        show: false,
    },
    {
        name: '图片',
        icon: 'icon-image',
        show: false,
    },
    {
        name: '背景',
        icon: 'icon-mosaic',
        show: false,
    },
    {
        name: '工具',
        icon: 'icon-qrcode',
        show: false,
    },
    {
        name: 'AI',
        icon: 'icon-robot',
        show: false,
    },
    {
        name: '我的',
        icon: 'icon-user',
        show: false,
    },
]
const activeWidgetClassify =  ref(0)
const active =  ref(true)
const clickClassify = (index: number) => {
    if (activeWidgetClassify.value  === index){
        active.value = !active.value
    }else {
        activeWidgetClassify.value = index
        active.value = true
    }
}
const getStyle = (index: number) => {
    return {
        display: activeWidgetClassify.value === index ? '' : 'none',
    }
}
</script>
<style lang="less" scoped>
// Color variables (appears count calculates by raw css)
@import "../../../styles/layouts";
@color1: #3e4651; // Appears 2 times
@menuWidth: 67px; // 默认菜单宽度
@active-text-color: #2254f4; // #1195db;
.sider-box{
  width:@menuWidth !important;
  :deep(.arco-layout-sider-children){
    overflow: initial;
  }
}
.sider-box.active{
  width: calc(@menuWidth + 329px) !important;
}
#s-widget-panel {
    transition: all 1s;
    color: @color1;
    display: flex;
    flex-direction: row;
    font-weight: 600;
    height: calc(100vh - 20px);
    position: relative;
    .s-widget-classify {
        border-right: 1px solid rgba(0, 0, 0, 0.07);
        background-color: #ffffff;
        height: 100%;
        text-align: center;
      display: grid;
      align-content: space-between;
        width: calc(@menuWidth - 1px); //减去边框1px
        .icon {
            font-size: 24px;
            color: #070707c9;
        }
        .s-classify-wrap {
            margin: 0;
            padding-top: 3px;
            user-select: none;
            width: 100%;
            justify-items: center;
            padding-left: 0;
            max-height: calc(100vh - 90px);
            overflow: auto;
            .s-classify-item {
                position: relative;
                align-items: center;
                cursor: pointer;
                display: flex;
                flex-direction: column;
                font-size: 12px;
                font-weight: 500;
                height: 68px;
                justify-content: center;
                width: 100%;
                .title {
                    color: var(--color-text-2);;
                    margin-top: 5px;
                }
                .icon {
                }
            }
            .s-classify-item:hover > .icon {
            }
            .s-active-classify-item {
                position: relative;
                .icon,
                .title {
                    color:rgb(var(--primary-6));
                }
            }
            .s-active-classify-item::after,
            .s-classify-item:hover::after {
                position: absolute;
                content: '';
                left: 0;
                top: 13px;
                width: 4px;
                height: 65%;
                background:rgb(var(--primary-6));;
            }
        }
      .b-classify-wrap {
        //margin: 0;
        padding-top: 3px;
        margin-bottom: 20px;
        user-select: none;
        width: 100%;
        justify-items: center;
        padding-left: 0;
        .b-classify-item {
          position: relative;
          align-items: center;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          font-size: 12px;
          font-weight: 500;
          height: 68px;
          justify-content: center;
          width: 100%;
          .title {
            color: var(--color-text-2);;
            margin-top: 5px;
          }
          .icon {
          }
        }
        .b-classify-item:hover{
          .icon,
          .title {
            color:rgb(var(--primary-6));
          }
        }
        .b-active-classify-item {
          position: relative;
          .icon,
          .title {
            color:rgb(var(--primary-6));
          }
        }
      }
    }
    .s-widget-wrap {
        width: @leftPanelWidth;
        background-color: #fff;
        flex: 1;
        height: 100%;
    }
    .s-side-wrap {
        position: fixed;
        left: calc(@leftPanelWidth + 66px);
        pointer-events: none;
        z-index: 100;
        width: 20px;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        .pack__up {
            pointer-events: all;
            border-radius: 0 100% 100% 0;
            cursor: pointer;
            width: 20px;
            height: 64px;
            cursor: pointer;
            background-image: url();
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            filter: drop-shadow(5px 0px 4px rgba(0, 0, 0, 0.03));
        }
        .pack__up:hover {
            color: rgba(0, 0, 0, 0.9);
            opacity: 0.9;
        }
    }
}
</style>
